<script setup lang="ts">
import iconTitle from "@/components/Lie/IconTitle.vue";

import { uploadfiles } from "@/api/upLoad";
import { showLoadingToast, closeToast } from "vant";
import { ref, reactive, defineAsyncComponent, toRefs } from "vue";

interface FormObj {
	imgOne: string[];
	imgTwo: string[];
}
const isRequire = ref(true);
const formData = reactive<FormObj>({
	imgOne: ["https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg"],
	imgTwo: ["https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg"],
});
const { imgOne, imgTwo } = toRefs(formData);

const ImgUpload = defineAsyncComponent(() => import("@/components/Image/ImageUpload.vue"));

setTimeout(() => {
	formData.imgOne = [
		"https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg",
		"https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg",
	];
}, 3000);

//图片有变化时获取最新数组
function getImgData<T>(val: T, key: string, mode: string): void {
	if (mode == "del") {
		formData[key] = val;
	} else {
		let data = {
			file: val,
		};
		showLoadingToast({
			message: "加载中...",
			forbidClick: true,
		});
		uploadfiles(data)
			.then(res => {
				if (res.code === 200) {
					formData[key].push(import.meta.env.VITE_BASE_IMGURL + res.msg);
				}
				closeToast();
			})
			.catch(() => {
				closeToast();
			});
	}
}

const onSubmit = function (e: Object) {
	console.log(e);
};
</script>

<template>
	<van-form @submit="onSubmit">
		<div class="padding_15">
			<iconTitle name="图片上传" />
			<div class="public_form_box">
				<ImgUpload
					class="padding_X_15 padding_top_10 public_bottom_line"
					name="房屋产权证/租赁协议/拍卖协议"
					:imgData="imgTwo"
					@getImgData="getImgData"
					keyName="imgTwo" />
				<ImgUpload
					class="padding_X_15 padding_top_10 public_bottom_line"
					name="房屋产权证/租赁协议/拍卖协议"
					:max="2"
					:isRequire="isRequire"
					:imgData="imgOne"
					@getImgData="getImgData"
					keyName="imgOne" />
			</div>
		</div>
		<div style="margin: 16px">
			<van-button round block type="primary" native-type="submit"> 提交 </van-button>
		</div>
	</van-form>
</template>

<style lang="scss" scoped>
::v-deep .van-cell__title label {
	color: #666666;
	font-size: 16px;
}
::v-deep .van-cell {
	padding: 10px 15px 10px 7px;
}
::v-deep .van-field__label--required:before {
	margin-right: 2px;
	color: var(--van-field-required-mark-color);
	content: "*";
	font-size: 16px;
}
</style>
